<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="model.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div v-loading="formLoading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :hideRequiredMark="model.text == '查看' ? true : false"
        >
          <!-- 按钮编码 (编辑页面时此字段不可编辑)-->
          <a-form-model-item
            ref="permissionCode"
            label="按钮编码"
            prop="permissionCode"
          >
            <a-input
              v-model.trim="form.permissionCode"
              placeholder="请输入按钮编码"
              :disabled="model.id ? true : false"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 按钮名称 -->
          <a-form-model-item
            ref="permissionName"
            label="按钮名称"
            prop="permissionName"
          >
            <a-input
              v-model.trim="form.permissionName"
              placeholder="请输入按钮名称"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 按钮类型 -->
          <a-form-model-item
            ref="permissionTypeValue"
            label="类型"
            prop="permissionTypeValue"
          >
            <a-select
              v-model="form.permissionTypeValue"
              placeholder="请选择按钮类型"
              disabled
              :loading="menuTypeLoading"
            >
              <a-select-option
                :value="item.dicValue"
                v-for="(item, index) in menuTypeSource"
                :key="index"
              >
                {{ item.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 是否外链 -->
          <a-form-model-item ref="isFrame" label="是否外链" prop="isFrame">
            <a-radio-group
              v-model="form.isFrame"
              :disabled="model.text == '查看' ? true : false"
            >
              <a-radio value="1"> 是 </a-radio>
              <a-radio value="0"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <!--  路由地址-->
          <a-form-model-item ref="path" label="pc路由地址" prop="path">
            <a-input
              v-model.trim="form.path"
              placeholder="请输入pc路由地址"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="255"
            />
          </a-form-model-item>
          <!--  app地址-->
          <a-form-model-item ref="appPath" label="pc路由地址" prop="appPath">
            <a-input
              v-model.trim="form.appPath"
              placeholder="请输入app路由地址"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="255"
            />
          </a-form-model-item>
          <!-- 应用标识 -->
          <a-form-model-item
            ref="activeRule"
            label="应用标识"
            prop="activeRule"
          >
            <a-input
              v-model.trim="form.activeRule"
              placeholder="请输入应用标识"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="255"
            />
          </a-form-model-item>
          <!-- 打开方式 -->
          <a-form-model-item ref="openType" label="打开方式" prop="openType">
            <a-select
              v-model="form.openType"
              placeholder="请选择打开方式"
              :disabled="model.text == '查看' ? true : false"
            >
              <a-select-option
                :value="item.key"
                v-for="(item, index) in openTypeSource"
                :key="index"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <div class="form-footer flex">
          <a-button type="default" @click="closeModal()">取消 </a-button>
          <a-button
            type="primary"
            :loading="loading"
            @click="onSubmit()"
            v-if="model.text != '查看'"
          >
            提交
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
import { getDictList } from "@/api/user-center/organizationManage.js";
import {
  getMenuAdd,
  getMenuDetails,
} from "@/api/user-center/businessManage.js";
export default {
  name: "addBthModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getMenuTypeList();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //按钮编码
        permissionCode: "",
        //按钮名称
        permissionName: "",
        //按钮类型
        permissionTypeValue: undefined,
        //是否外链
        isFrame: "0",
        //路由地址
        path: "",
        //app路由地址
        appPath: "",
        //应用标识
        activeRule: "",
        //打开方式
        openType: undefined,
      },
      formLoading: false,
      rules: {
        permissionCode: [
          { required: true, message: "请输入按钮编码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]+$/,
            message: "只能输入英文字母，数字，下划线，中划线",
          },
        ],
        permissionName: [
          { required: true, message: "请输入按钮名称", trigger: "blur" },
        ],
        permissionTypeValue: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        isFrame: [
          { required: true, message: "请选择是否外链", trigger: "change" },
        ],
        path: [
          { required: true, message: "请输入pc路由地址", trigger: "blur" },
        ],
        appPath: [
          { required: true, message: "请输入app路由地址", trigger: "blur" },
        ],
        activeRule: [
          { required: true, message: "请输入应用标识", trigger: "blur" },
        ],
        openType: [
          { required: true, message: "请选择打开方式", trigger: "change" },
        ],
      },
      //打开方式
      openTypeSource: [
        { key: "blank", value: "新窗口" },
        { key: "inner", value: "当前窗口" },
      ],
      //菜单类型
      menuTypeSource: [],
      menuTypeLoading: false,
    };
  },
  mounted() {},
  methods: {
    //查询菜单类型
    getMenuTypeList() {
      this.menuTypeLoading = true;
      getDictList({ dictKey: "permissionType" })
        .then((res) => {
          let { data } = res;
          this.menuTypeSource = data.result || [];
          if (!this.model.id) {
            this.form.permissionTypeValue =
              this.menuTypeSource.find((v) => v.dicDesc == "按钮")?.dicValue ||
              undefined;
          }
        })
        .catch((_) => {
          this.form.permissionTypeValue = undefined;
          this.menuTypeSource = [];
        })
        .finally((_) => {
          this.menuTypeLoading = false;
        });
    },
    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getMenuDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form = {
            //菜单编码
            permissionCode: result.permissionCode,
            //菜单名称
            permissionName: result.permissionName,
            //菜单类型
            permissionTypeValue: Number(result.permissionTypeValue),
            //是否外链
            isFrame: result.isFrame,
            //pc路由地址
            path: result.path,
            //app路由地址
            appPath: result.appPath,
            //应用标识
            activeRule: result.activeRule,
            //打开方式
            openType: result.openType,
          };
        })
        .catch((_) => {})
        .finally((_) => {
          this.formLoading = false;
        });
    },
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id, parentId } = this.model;
          let { systemCode } = this.$route.query;
          let formJson = {
            //菜单编码
            permissionCode: form.permissionCode,
            //菜单名称
            permissionName: form.permissionName,
            //菜单类型
            permissionTypeValue: form.permissionTypeValue,
            //是否外链
            isFrame: form.isFrame,
            //pc路由地址
            path: form.path,
            //app路由地址
            appPath: form.appPath,
            //应用标识
            activeRule: form.activeRule,
            //打开方式
            openType: form.openType,
            //排序
            sort: "0",
            //是否h5
            isH5Str: "1",
            //pc菜单图标
            pcIcon: "",
            //app菜单图标
            appIcon: "",
            //系统表系统编码
            systemCode,
            //父级菜单id
            parentId,
          };
          if (id) {
            formJson.id = id;
          }
          getMenuAdd(formJson)
            .then((res) => {
              let msg = "新增菜单成功！";
              if (id) {
                msg = "编辑菜单成功！";
              }
              notificationTip("success", msg);
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.form = {
        //按钮编码
        permissionCode: "",
        //按钮名称
        permissionName: "",
        //按钮类型
        permissionTypeValue: undefined,
        //是否外链
        isFrame: "0",
        //路由地址
        path: "",
        //app路由地址
        appPath: "",
        //应用标识
        activeRule: "",
        //打开方式
        openType: undefined,
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px 20px 40px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 102px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
